<template>
	<view class="lottery_container">
		<view class="grid_wrap">
			<view class="lottery_wrap">
				<ul class="lottery_grid">
					<li v-for="(item, index) in grid_info_arr"
						:class="{ active: current_index == index && index != 8 , buttonAct: isBegin && index == 8}"
						:key="index" @click="luck_draw(index)" :data-index="index">
						<view class="items ">
							<template v-if="index == 8">
								<view class="itemsbtns">
									<template v-if="isBegin">
										<view>抽奖中</view>
									</template>
									<template v-else>
                    <block v-if="num">
                      <view>开始抽奖</view>
                      <view>{{num}}次</view>
                    </block>
										<block v-else>
                      <view>下次再来</view>
                    </block>
									</template>
								</view>
							</template>
							<template v-else>
								<image class="grid_img" mode="aspectFit" :src="item.img" alt="">
									{{item.name}}
							</template>
						</view>
					</li>
				</ul>
			</view>
			<view class="lottery_wrap_border">
				<ul v-for="(item, index) in 4" :key="index">
					<li v-for="(item, key) in 6" :key="key"></li>
				</ul>
			</view>
		</view>
	</view>
</template>

<script>
	import LotteryDraw from './SJ-LotteryDraw.js';

	export default {
		data() {
			return {
				current_index: -1,
				isBegin: false, // 是否开始抽奖
        numTemp:this.num

			};
		},
		props: {
			grid_info_arr: {
				type: Array,
				default: function() {
					return {};
				}
			},
      num:{
        type:Number,
        default:1
      }
		},

		methods: {
			luck_draw(inde) {
				let index = inde;
				let that = this;
				if (index == 8) {
          if(that.isBegin) return this.$message.info('正在抽奖中')
          if(!this.numTemp) return this.$message.info('抽奖次数已用完')
          that.isBegin = true
					// 点击抽奖之后知道获奖位置，修改父组件中lottery_draw_param的值
					this.$emit('get_winingIndex', (res)=>{
						console.log(res,1111);
						let lottery_draw_param = res;
            this.$emit('update:num',--this.numTemp)
						let win = new LotteryDraw({
								domData: that.grid_info_arr,
								...lottery_draw_param
							},
							function(index, count) {
								that.current_index = index;
								if (lottery_draw_param.winingIndex == index && lottery_draw_param.totalCount == count) {
									that.$emit('luck_draw_finish', {});
									// console.log('抽到了')
									that.isBegin = false
								}
							}
						);
					});
				}
			}
		}
	};
</script>

<style scoped lang="scss">
	@import '@/uni.scss';

	$grid_wrap_bg: #9ad3ff; //九宫格背景色(包括边框色)
	$grid_wrap_inner_bg: #61a2fc; //九宫格内层背景色
	$grid_wrap_shadow: #89bbf7; //九宫格外层下边框阴影色

	// 边框
	$grid_bobble_bg: #F7E27E; //边框小球颜色
	$grid_Bigball_bg: #F7E27E; //边框大球颜色

	$grid_wrap_width: 622rpx; //九宫格宽度(包括边框)
	$grid_wrap_height: 612rpx; //九宫格高度
	$grid_wrap_shadowSize: 14rpx; //格子的阴影大小

	$grid_wrap_inner_width: 550rpx; //九宫格内层的宽度(不包括边框)
	$grid_wrap_inner_height: 566rpx; //九宫格内层的高度

	$grid_item_fontSize: 24rpx; //格子字体大小
	$grid_play_btn_fontSize: 32rpx; //抽奖按钮字体大小

	$grid_border_size: 39rpx; //边框的大小（外层宽-内层宽）/2

	$grid_item_width: 176rpx; //每个格子的宽度(内层宽-格子间距*4)/3
	$grid_item_height: 152rpx; //每个格子的高度(内层高-格子间距*4)/3

	$grid_item_logo_width: 72rpx; //每个格子内的图片宽度
	$grid_item_logo_height: 72rpx; //每个格子内的图片高度度

	$grid_bobble_size: 10rpx; //边框小球大小
	$grid_Bigball_size: 20rpx; //边框大球大小
	$grid_Ball_margin: 30rpx; //球与球之间的距离

	li {
		list-style: none;

	}

	ul,
	li {
		margin: 0;
		padding: 0;
	}

	.grid_wrap {
		// background-color: $grid_wrap_bg;
		width: $grid_wrap_width;
		height: $grid_wrap_height;
		position: relative;
		border-radius: 12rpx;
		// box-shadow: 0rpx $grid_wrap_shadowSize 0rpx 0rpx $grid_wrap_shadow;

		.lottery_wrap_border {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
      padding-top:52rpx;
			ul {
				position: absolute;
				display: flex;
				align-items: center;
				justify-content: center;

				li {
					border-radius: 50%;
					width: $grid_bobble_size;
					height: $grid_bobble_size;
					background-color: $grid_bobble_bg;

				}

				li:nth-child(even) {
					width: $grid_Bigball_size;
					height: $grid_Bigball_size;
					background-color: $grid_Bigball_bg;

				}
			}

			ul:nth-child(odd) {
				width: 100%;
				height: $grid_border_size;
				left: 0;
				right: 0;
				flex-direction: row;

				li {
					margin: 0 $grid_Ball_margin;
				}
			}

			ul:nth-child(even) {
				width: $grid_border_size;
				height: 100%;
				top: 0;
				bottom: 0;
				flex-direction: column;

				li {
					margin: $grid_Ball_margin 0;
				}
			}

			ul:nth-child(3) {
				bottom: 0;
			}

			ul:nth-child(4) {
				right: 0;
			}

			ul:nth-child(1),
			ul:nth-child(4) {
				li:nth-child(odd) {
					animation: blink_large 1s linear infinite;
				}

				li:nth-child(even) {
					animation: blink_small 1s linear infinite;
				}
			}

			ul:nth-child(3),
			ul:nth-child(2) {
				li:nth-child(even) {
					width: $grid_bobble_size;
					height: $grid_bobble_size;
					background-color: rgba($color: $grid_bobble_bg, $alpha: .3);
					animation: blink_large 1s linear infinite;
				}

				li:nth-child(odd) {
					width: $grid_Bigball_size;
					height: $grid_Bigball_size;
					background-color: rgba($color: $grid_Bigball_bg, $alpha: 1.0);
					animation: blink_small 1s linear infinite;
				}
			}
		}

		.lottery_wrap {
			width: $grid_wrap_inner_width;
			height: $grid_wrap_inner_height;
			font-size: 14rpx;
			border-radius: 12rpx;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			z-index: 1;

			.lottery_grid {
				position: relative;
				left: 2rpx;
				width: 100%;
				height: 100%;

				li {
					width: $grid_item_width;
					height: $grid_item_height;
					position: absolute;
					border-radius: 12rpx;
					color: #851B00;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					font-size: $grid_item_fontSize;
					background: url('./static/cj-bg1.png') no-repeat;
					background-size: 100%;


					.items {
						width: 100%;
						height: calc(100% - 17rpx);
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						.itemsbtns {
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;
							line-height: none;
						}

						.show-text {
							font-size: 20rpx;
							color: #FFFE5E;
							font-weight: normal;
							margin-top: 4rpx;
						}
					}

					.grid_img {
						width: $grid_item_logo_width;
						height: $grid_item_logo_height;
					}
				}

				.active {
					background: url('./static/cjac.png') no-repeat;
					background-size: 100%;
				}

				li:nth-of-type(1) {
					left: 0;
					top: 70rpx;
				}

				li:nth-of-type(2) {
					left: 184rpx;
					top: 70rpx;
				}

				li:nth-of-type(3) {
					left: 368rpx;
					top: 70rpx;
				}

				li:nth-of-type(4) {
					left: 368rpx;
					top: 230rpx;
				}

				li:nth-of-type(5) {
					left: 368rpx;
					top: 390rpx;
				}

				li:nth-of-type(6) {
					left: 184rpx;
					top: 390rpx;
				}

				li:nth-of-type(7) {
					left: 0;
					top: 390rpx;
				}

				li:nth-of-type(8) {
					left: 0;
					top: 230rpx;
				}

				// 开始抽奖按钮
				li:nth-of-type(9) {
					left: 184rpx;
					top: 230rpx;
					cursor: pointer;
					color: #EC4425;
					font-size: 32rpx;
					font-weight:bold;
					background: url('./static/start.png') no-repeat;
					background-size: 100%;
					width: 176rpx;
					height: 152rpx;
				}

				.buttonAct {
					background: url('./static/start.png') no-repeat !important;
					background-size: 100% !important;
				}
			}
		}

		.lottery_finish_wrap {}
	}

	@keyframes blink_large {
		to {
			width: $grid_Bigball_size;
			height: $grid_Bigball_size;
			background-color: rgba($color: $grid_Bigball_bg, $alpha: 1.0);
		}
	}

	@keyframes blink_small {
		to {
			width: $grid_bobble_size;
			height: $grid_bobble_size;
			background-color: rgba($color: $grid_bobble_bg, $alpha: .4);
		}
	}

	.lottery_container {
		width: 622rpx;
		height: 612rpx;
		// background: url('/static/cjbot.png') no-repeat;
		// background-size: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.button {
		background: url(http://carbins.hnshpjs.com/static/appimage/luckitebutton.png) no-repeat !important;
		background-size: 100% 100% !important;
	}
</style>
